<template>
  <t-menu v-model="activePage" :collapsed="appStore.sideCollapse" expand-mutex @contextmenu.prevent="$event.preventDefault()">
    <template v-for="item in authStore.permissions">
      <t-menu-item v-if="!item.children" :value="item.permissionPath" :to="item.permissionPath">
        <template v-if="item.permissionIcon" #icon>
          <t-icon :name="item.permissionIcon"/>
        </template>
        {{ item.permissionTitle }}
      </t-menu-item>
      <t-submenu v-else :title="item.permissionTitle" :value="item.id">
        <template v-if="item.permissionIcon" #icon>
          <t-icon :name="item.permissionIcon" :style="{color: item.permissionIconColor}"/>
        </template>
        <t-menu-item v-for="menu in item.children" :value="menu.permissionPath" :to="menu.permissionPath">
          <template v-if="menu.permissionIcon" #icon>
            <t-icon :name="menu.permissionIcon" :style="{color: menu.permissionIconColor}"/>
          </template>
          {{ menu.permissionTitle }}
        </t-menu-item>
      </t-submenu>
    </template>
  </t-menu>
</template>

<script setup lang="ts">
import {useRoute} from "vue-router";
import {useAppStore} from "@/store/modules/app";
import {useAuthStore} from "@/store/modules/auth";
import {onMounted, ref, watch} from "vue";

const appStore = useAppStore();
const authStore = useAuthStore();
const route = useRoute();

const activePage = ref('');

onMounted(() => {
  activePage.value = route.fullPath;
})

watch(() => route.fullPath, () => {
  activePage.value = route.fullPath;
})
</script>

<style lang="scss" scoped>
</style>